<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-06-30 10:09:43
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-30 11:06:20
 * @FilePath: /XMate-h5/src/views/minutes/components/speech/SpeechSegmentItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="flex flex-col justify-between items-center px-4 py-3 text-[12px] cursor-pointer rounded-lg mb-2 transition-colors duration-150"
    :class="[active ? 'bg-yxt-blue text-white' : 'bg-[#F9FAFC] text-gray-900']"
    @click="$emit('click', item, index)"
  >
    <div class="flex items-center justify-between w-full">
      <span>片段 {{ index + 1 }}</span>
      <span class="ml-2"> {{ formatTime(item.bt) }}~{{ formatTime(item.et) }} </span>
    </div>
    <van-divider
      v-if="active"
      :style="{
        width: '100%',
        color: '#587BFF',
        borderColor: '#587BFF',
        margin: '12px 0',
      }"
    />
    <div v-if="active" class="w-full mt-2">
      <p>{{ item.txt }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from "vue";
import { AsrObject } from "@/types/minutes/store.type";

const props = defineProps<{
  item: AsrObject;
  index: number;
  active: boolean;
}>();
defineEmits(["click"]);

function formatTime(ms: number) {
  const sec = Math.floor(ms / 1000);
  const min = Math.floor(sec / 60);
  const s = sec % 60;
  return `${min.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
}
</script>

<style scoped></style>
